<style lang="less" scoped>
    @import "../../less/_variable.less";
    .details_cont {
        overflow-y: hidden;

    .vux-header {
        background-color: rgba(255,255,255,0);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transition: all 0.5s;
        border-bottom: 1px solid #efefef;
    }
    .vux-header.active{
        background-color: rgba(255,255,255,1);
    }


    // 底部购买
    .footer_buy {
        position: absolute;
        background: #fff;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1.12rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

    .goback {
        width: 14.67%;

    a {
        display: block;
        margin: 0 auto;
        width: 1.1rem;
        height: 100%;
        text-align: center;

    .find {
        width: 0.66rem;
        height: 0.5rem;
        margin: 0.18rem 0.26rem 0.12rem;
        background: url(../../assets/img/find.png) no-repeat center 0;
        background-size: 100% 100%;
    }

    }
    }
    .along {
        width: 37.86%;
        /*background: #fd9200;*/ /*TODO ylb 1.0版本单独购买变灰*/
        background-color:#cccccc;
    a {
        display: block;
        width: 2.84rem;
        height: 100%;
        color: #fff;
        padding: 0.16rem 0;
        margin: 0 auto;

    span {
        display: block;
        font-size: 0.33rem;
        line-height: 0.4rem;
        text-align: center;
    }

    }
    }
    .group {
        width: 47.46%;
        background: #fd8d2c;

    a {
        display: block;
        margin: 0 auto;
        width: 3.56rem;
        height: 100%;
        color: #fff;
        padding: 0.16rem 0;

    span {
        display: block;
        font-size: 0.33rem;
        line-height: 0.4rem;
        text-align: center;
    }

    }
    }
    }

    }
    .v-transfer-dom {

    .vux-popup-dialog {

    .popup0 {

    .header_box {
        border-bottom: 1px solid #f3f3f3;
        float: left;
        width: 100%;

    img {
        width: 2.2rem;
        height: 2.2rem;
        margin: -0.63rem 0.23rem 0.27rem;
        border-radius: 0.1rem;
        float: left;
    }

    .prise {
        float: left;

    h1 {
        font-size: 0.36rem;
        color: #e02c1f;
        padding-top: 0.58rem;
        padding-left: 0.2rem;
    }

    .color_model {
        font-size: 0.24rem;
        color: #222;
        margin: 0.13rem 0.2rem;

    span {
        margin-right: 0.1rem;
        &:first-of-type{
            margin-right: 0;
        }
    }

    }
    }
    .close {
        float: right;
        margin-right: 0.32rem;
        margin-top: 0.33rem;
        background: url('../../assets/img/close.png') no-repeat center center;
        background-size: 100% 100%;
        width: 0.3rem;
        height: 0.3rem;
    }

    }
    .content_box {
        float: left;
        width: 100%;
        margin: 0 0.23rem;
        &:last-of-type .colors .options{
            border: none;
        }

    .colors {

    h3 {
        font-size: 0.26rem;
        color: #333;
        margin: 0.26rem 0;
    }

    .options {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        border-bottom: 1px solid #f3f3f3;

    span {
        background: #f3f3f3;
        padding: 0.17rem 0.18rem;
        border-radius: 0.1rem;
        margin-right: 0.32rem;
        margin-bottom: 0.26rem;
    }

    .bg_red {
        background: #e94f4f;
        color: #fff;
    }

    }
    }
    }
    }
    }
    }
    .footer_ok {
        width: 100%;
        height: 1.1rem;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #fd8d2c;
        font-size: 0.36rem;
        color: #fff;
        text-align: center;
        line-height: 1.1rem;
    }
    .share_b{
        justify-content: space-between;
        .goback{
            display: none;
        }
        .along, .group{
            flex: 1;
        }
    }

</style>
<template>
    <div class="details_cont infoTab">
        <x-header v-show="!share" :class="scrollTop >= 25 ? 'active':''" :style="{height: interactive.statusBarHeight.height,zIndex: 10,paddingTop: '0.4rem',borderBottom: 'none',overflow:hidden}" :left-options="{showBack:false,backText: '',preventGoBack:false}" @on-click-back="gotobanck" :right-options="{backText: ''}">
            <a slot="left" class="back_hui_icon" @click="gotobanckTwo"></a>
            <tab :class="scrollTop >= 25 ? 'active':''" :line-width="1" :custom-bar-width="getBarWidth" v-model="tabIndex">
                <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click.native="tabClick(index)" :key="index">{{item}}</tab-item>
            </tab>
            <a slot="right" class="right_share" v-on:click="sharePage"></a>
        </x-header>
        <div v-show="share" class="share_alert" @click="openApp">在App打开>></div>

        <scroller lock-x  @on-scroll="onScroll" ref="scrollerEvents">
            <Demo ref="product" @get="getProduct" @infoFather="info"></Demo>
        </scroller>
        <!-- <Eval></Eval> -->
        <!-- 底部购买 -->
        <div class="footer_buy" :class="share || formShare ? 'share_b' : ''">
            <div class="goback" @click="gotobanck">
                <a>
                    <div class="find"></div>
                    首页</a>
            </div>
            <div class="along">
                <a>
                    <span>￥{{product.price}}</span>
                    <!--<span>(尽情期待)</span>-->
                    <span>单独购买</span>
                </a>
            </div>
            <div class="group" @click="showup">
                <a>
                    <span>￥{{product.discountPrice?product.discountPrice:product.price}}</span>
                    <span>发起拼单</span>
                </a>
            </div>
        </div>
        <!--点击购买弹窗-->
        <div v-transfer-dom>
            <popup v-model="show" style="background:#fff;height: 9.37rem">
                <div class="popup0">
                    <div class="header_box">
                        <img v-lazy="{src:product.mainImage}" alt="">
                        <div class="prise">
                            <h1>￥{{product.discountPrice?product.discountPrice:product.price}}</h1>
                            <!--<div class="color_model">
                                <span>请选择：</span>
                                <span>颜色</span>
                                <span>型号</span>
                            </div>-->
                        </div>
                        <div class="close" @click="closedown"></div>
                    </div>
                    <!--<div class="content_box">
                        <div class="colors" v-for="n in sites">
                            <h3>{{n.title}}</h3>
                            <div class="options">
                                <span v-for="(x,index) in n.color" :class="[bg_click == index ? bg_red : '']"
                                      @click="bg_color(index)">{{x}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="content_box">
                        <div class="colors" v-for="n in sites">
                            <h3>型号</h3>
                            <div class="options">
                                <span v-for="(x,index) in n.color" :class="[bg_click == index ? bg_red : '']"
                                      @click="bg_color(index)">{{x}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="content_box">
                        <div class="colors" v-for="n in sites">
                            <h3>内存</h3>
                            <div class="options">
                                <span v-for="(x,index) in n.color" :class="[bg_click == index ? bg_red : '']"
                                      @click="bg_color(index)">{{x}}</span>
                            </div>
                        </div>
                    </div>-->
                    <div class="content_box" style="margin: 0">
                        <div class="colors main_c_b_s_o" v-for="n in sites">
                            <group>
                                <x-number v-model="buyNumber" title="购买数量" :min="0" :max="max" fillable></x-number>
                            </group>
                        </div>
                    </div>
                    <button class="footer_ok" :disabled= " buyNumber == 0" :class="buyNumber== 0 ?'disabled':''" v-on:click="gotoPage">确定</button>

                </div>
            </popup>
        </div>
    </div>
</template>
<script>
    import {Previewer,XImg,Scroller} from 'vux'
    import Eval from './evaluation'
    import Demo from './product_details_cont'
    import {mapActions,mapState} from 'vuex'
    import {
        Tab,
        TabItem,
        XHeader,
        TransferDom,
        Popup,
        Group,
        Cell,
        XButton,
        XSwitch,
        Toast,
        XAddress,
        XNumber,
        ChinaAddressData,
        Swiper, SwiperItem
    } from 'vux'
    export default {
        directives: {
            TransferDom
        },
        components: {
            Tab, TabItem, XHeader, Previewer, XImg, Eval, Demo, Popup,
            Group,
            Cell,
            XSwitch,
            Toast,
            XAddress,
            XNumber,
            XButton,
            Scroller,
            Swiper, SwiperItem
        },
        data () {
            return {
                //顶部菜单自定义宽度
                getBarWidth: function (index) {
                    return (index + 1) * 22 + 'px'
                },
                addressData: ChinaAddressData,
                show: false,
                bg_click: 0,
                bg_red: 'bg_red',
                sites: [
                    {
                        title: '颜色',
                        color: [
                            '黑色',
                            '银色',
                            '金色'
                        ]
                    }
                ],
                max:2,
                buyNumber:1,
                product:{},
                scrollTop: 0,
                tabIndex:0,
                list2:['商品', '评价', '详情'],
                share: false,
                formShare:false
            }
        },
        activated:function () {
            console.log(this.$route)
            if(this.$route.query.sharePage && this.$route.query.sharePage === '1'){
                this.share = true
            }
            if(this.$route.query.form && this.$route.query.form === 'share'){
                this.formShare = true
            }
            if(this.scrollTop != 0){
                this.$refs.scrollerEvents.reset({top:0})
            }
            this.Interactive.changeStatusStyle('0');
            this.Interactive.getChannel();    //初始化加载渠道
        },
        deactivated:function () {
            this.Interactive.changeStatusStyle('1');
        }
        , methods: {
            info(){
                this.$refs.scrollerEvents.reset({top:0})
            },
            tabClick(item){
                this.demo2 = item;
                if(item == this.tabIndex){
                    return ;
                }
                if(item == 0){
                    this.$refs.scrollerEvents.reset({top:25})
                }
                if(item == 1 ){
                    let data = document.getElementsByClassName('evaluation_box')[0].offsetTop-100;
                    this.scrollTop = data;
                    this.$refs.scrollerEvents.reset({top:data})
                }
                if(item == 2){
                    let date = document.getElementsByClassName('product_pic_box')[0].offsetTop-100;
                    this.scrollTop = date;
                    this.$refs.scrollerEvents.reset({top:date})
                }
            },
            gotobanck(){
                if(this.$route.query.form == "order"){
                    this.$router.push('/my');
                    this.Interactive.showTabbar();
                    this.Interactive.orderDetailIntoHome();
                }else if(this.formShare){
                    this.Interactive.activityWebDismiss();
                }else{
                    this.$router.goBack();
                }
            },
            gotobanckTwo(){
                if(this.formShare){
                    this.Interactive.activityWebDismiss();
                }else{
                    this.$router.goBack();
                }
            },
            sharePage(){
                let obj = {
                    "title":"【￥" + (this.product.discountPrice != null ? this.product.discountPrice : this.product.price)+"】"+this.product.name,
                    "content": '我在铺连铺发现了一个不错的商品，快来看看吧！',
                    "imageUrl": this.product.mainImage,
                    "shareUrl": this.comJS.addSharePageUrl(window.location.href),
                    "originalPage": '/pages/goods/goodDetail?goodsId=' + this.$route.query.templateId + '&inviteCode=' + localStorage.getItem('inviteCode') + '&form=share'
                }
                this.Interactive.shareClick(obj);
            },
            onScroll (pos) {
                this.scrollTop = pos.top;
                let data = document.getElementsByClassName('product_pic_box')[0].offsetTop;
                let date = document.getElementsByClassName('evaluation_box')[0].offsetTop;
                if(pos.top+100 >= date && pos.top+100 < data){
                    this.tabIndex = 1
                }else if(pos.top+100 >= data){
                    this.tabIndex = 2
                }else{
                    this.tabIndex = 0
                }

            },
            //  发起拼单
            showup: function () {
                //  判断是不是分享页面  如果是 唤起app
                if(this.share){
                    this.comJS.openApp()
                } else {
                    this.max = this.$refs.product.backInfo().limitCount;
                    this.show = true;
                }
            },
            //  在app打开
            openApp(){
                this.comJS.openApp()
            },
            closedown: function () {
                this.show = false;
            },
            bg_color: function (num) {
                this.bg_click = num;
            },
            gotoPage(){
                let token = localStorage.getItem('token')
                    if(!token){
                        this.Interactive.pushTokentoJS();
                        return;
                    }
                var product = this.$refs.product.backInfo();
                product.buyNumber = this.buyNumber;
                localStorage.setItem('product',JSON.stringify(product));
                this.$router.push({path:'/home/submitOrder',query:{
                    productId:this.$route.query.productId,
                    templateId:this.$route.query.templateId
                }})
            },
            getProduct(obj){
                this.product = obj;
            }

        },
        computed: mapState({interactive: state => state.interactive}),
    }
</script>


